<template>
  <div class="ai-gc-list-wrap table-gl-w">
    <div class="edit-w">
      <a-select style="width: 500px" v-model="currentType">
        <a-option v-for="(item, index) in types" :key="index" :value="item.id">{{ item.label }}</a-option>
      </a-select>
      <div style="margin-top: 10px">
        <a-textarea v-model="prompt" style="width: 500px; height: 100px" placeholder="请输入英文的图片描述" />
      </div>
      <a-space>
        <a-button type="primary" size="medium" @click="onSubmit(currentType)">提交英文任务</a-button>
        <a-button size="medium" @click="onSubmit('bytedancet2imgzh')">提交中文任务</a-button>
        <p class="warningColor">中文任务比较慢，经过了二次处理</p>
      </a-space>
    </div>
    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="loadFromServer">
        <template #headerLeft>
          <a-space>
            <p>排队中任务数量:{{ process_size }}</p>
          </a-space>
        </template>
        <template #tableBody>
          <a-table
            class="table-two-line show-border-table"
            ref="tableRef"
            :loading="tableLoading"
            :data="reqList"
            :scroll="{
              y: '100%',
            }"
            size="mini"
            :pagination="false"
          >
            <template #columns>
              <a-table-column title="提交时间" :width="150">
                <template #cell="{ record }">
                  <p>{{ $setTime(record.gmtCreate) }}</p>
                </template>
              </a-table-column>
              <a-table-column title="提示词" dataIndex="prompt" />
              <a-table-column title="状态" dataIndex="status">
                <template #cell="{ record }">
                  <a-space>
                    <span>{{ record.status }}</span>
                    <icon-refresh v-if="record.status != 'done'" :size="18" style="margin-left: 5px" class="highlight cursor" @click="loadFromServer" />
                  </a-space>
                </template>
              </a-table-column>
              <a-table-column title="生成内容" dataIndex="status">
                <template #cell="{ record }">
                  <a-image-preview-group infinite v-if="record.content && record.content.images && record.content.images">
                    <a-space>
                      <a-image v-for="(pic, picindex) in record.content.images" :key="picindex" :src="pic" width="80" />
                    </a-space>
                  </a-image-preview-group>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </template>
      </TableWrap>

      <!-- <table border="1">
        <tr>
          <td>提交时间</td>
          <td>提示词</td>
          <td>状态</td>
          <td>生成内容</td>
        </tr>
        <tr v-for="(item, index) in reqList" :key="index">
          <td>{{ item.gmtCreate }}</td>
          <td>{{ item.prompt }}</td>
          <td>{{ item.status }}</td>
          <td> </td>
        </tr>
      </table> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { aigcsubmit, aigclist, aigctasksize } from '@/api/ai/Aigc'
  import { Message } from '@arco-design/web-vue'
  import TableWrap from '@/components/TableWrap.vue'
  let types = ref([
    { label: '文字生成图片模型1', id: 'bytedancet2img' },
    { label: 'stablediffusion2base', id: 'stablediffusion2base' },
  ])
  const currentType = ref('bytedancet2img')
  let process_size = ref(-1)
  let prompt = ref('')
  const tableLoading = ref(false)
  let reqList = ref([] as any)

  const onSubmit = async (models: string) => {
    if (!prompt.value) {
      Message.error('请输入内容')
      return
    }

    let rs = await aigcsubmit({
      req: {
        models: models,
        modelsType: 'txt2img',
        prompt: prompt.value,
        ver: 0,
      },
    })
    if (rs) {
      prompt.value = ''
      Message.success('任务提交成功，大约10秒后可刷新查看生成结果~')
      loadFromServer()
    }
  }

  const loadFromServer = async () => {
    tableLoading.value = true
    let rs = await aigctasksize({ models: 'bytedancet2img' })
    process_size.value = rs?.data?.remaining || 0
    rs = await aigclist({})
    let items = rs?.data?.list || []
    items.forEach((item: any) => {
      item['content'] = JSON.parse(item?.generatedContent || '{}')
    })
    tableLoading.value = false
    reqList.value = items
  }
  onMounted(() => {
    loadFromServer()
  })
</script>
<style scoped lang="less">
  .ai-gc-list-wrap {
    .edit-w {
      background-color: #fff;
      padding: 5px 10px;
    }
  }
</style>
